<template>
	<vk-data-dialog
		v-model="value.show"
		:title="page.title"
		:top="page.top"
		:width="page.width"
		:close-on-click-modal="true"
		mode="form"
		@open="onOpen"
		@closed="onClose"
	>
		<!-- 页面主体内容开始 -->
		<vk-data-form
			ref="form1"
			v-model="form1.data"
			:form-type="value.mode"
			:rules="form1.props.rules"
			:action="form1.props.action"
			:columns="form1.props.columns"
			:loading.sync="form1.props.loading"
			:labelWidth="form1.props.labelWidth"
			:show-cancel="page.showCancel"
			:cancel-text="page.cancelText"
			:submit-text="page.submitText"
			:auto-close="false"
			@success="onFormSuccess"
		>
			<template v-slot:userInfo="{ form, keyName }">
				<view>
					<view>
						 <el-avatar :size="20" :src="userInfo.avatar"></el-avatar>
						 <text style="margin-left: 5px;">{{ userInfo.nickname }}</text>
					</view>
					<view>余额：{{ vk.pubfn.priceFilter(userInfo.balance) }} 元</view>
				</view>
			</template>
		</vk-data-form>
		<!-- 页面主体内容结束 -->
	</vk-data-dialog>
</template>

<script>
var that; // 当前页面对象
var vk = uni.vk; // vk实例
export default {
	props: {
		value: {
			Type: Object,
			default: function() {
				return {
					show: false,
					mode: "",
					item: {}
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			page: {
				title: "余额转账",
				submitText: "确定",
				cancelText: "关闭",
				showCancel: true,
				top: "7vh",
				width: "500px"
			},
			form1: {
				// 表单请求数据，此处可以设置默认值
				data: {
					_id:"",
					user_id:""
				},
				// 表单属性
				props: {
					// 表单请求地址
					action: "admin/business/sys/user.balanceTransfer",
					// 表单字段显示规则
					columns: [
						{ key:"userInfo", title:"用户信息", type:"text" },
						{ key: "", title: "转账人信息", type: "bar-title" },
						{
							key: "user_id", title: "选择转账用户", type: "table-select", placeholder:"请选择转账用户",
							dialogWidth:900,
							pageSize:10,
							action:"admin/business/sys/user.getList",
							columns:[
								{ key:"_id", title:"用户id", type:"text", idKey:true, show:["none"] }, // idKey:true 代表此字段为主键字段，若设置show:["none"],则可以在表格中隐藏该字段的显示
								{ key:"avatar", title:"头像", type:"image", width:80 },
								{ key:"nickname", title:"用户昵称", type:"text", minWidth:200, align:"left", nameKey:true  },
								{ key:"account_balance.balance", title:"余额", type:"money", width:120 },
								{ key:"mobile", title:"手机号", type:"text", width:140 },
								{ key:"tag_list", title:"标签", type:"text", minWidth:160,
									formatter: function(val=[], row, column, index) {
										let str = "";
										val.map((item, index) => {
											str += item.name + "、";
										});
										if(str){
											str = str.substring(0,str.length-1);
										}else{
											str = "-";
										}
										return str;
									}
								}
							],
							queryColumns:[
								{ key:"nickname", title:"用户昵称", type:"text", width:200, mode:"%%" },
								{ key:"mobile", title:"手机号", type:"text", width:200, mode:"%%" }
							],
							formData:{
								nickname:""
							},
							onChange:function(val, formData, column, index, option){
								that.$set(formData,"zz_nickname",option.nickname);
							}
						},
						{ key: "value", title: "转账余额", type: "money" },
						{ key: "remark", title: "转账备注", type: "textarea",
							autosize:{ minRows:4, maxRows:10 },
						  maxlength:99,
						  showWordLimit:true,
						},
					],
					// 表单验证规则
					rules: {
						user_id: [
							// 必填
							{ required: true, message: "转账对象不能为空", trigger: ['blur','change'] }
						],
						value: [
							// 必填
							{ required: true, message: "转账余额不能为空", trigger: ['blur','change'] },
							{ validator: (rule, value, callback)=>{
								if (value > that.userInfo.balance) {
									callback(new Error(`余额不足，最大为 ${vk.pubfn.priceFilter(that.userInfo.balance)}`));
								} else {
									callback();
								}
							}, trigger: ['blur','change'] }
						],
					},
					// 左侧label的宽度
					labelWidth: "120px",
				}
			},
			userInfo:{}
		};
	},
	mounted() {
		that = this;
		that.init();
	},
	methods: {
		// 初始化
		init() {
			let { value } = that;
			that.$emit("input", value);
		},
		// 监听 - 页面打开
		onOpen() {
			that = this;
			let { item={} } = that.value;
			// 每次打开时，重新设置表单的值 = value.item 的值，item通过 vk.pubfn.openForm('表单名',{ item:{ _id:"1" } }) 传递值
			that.userInfo = {
				nickname: item.nickname,
				avatar: item.avatar,
				balance: item.account_balance.balance
			};
			that.form1.data._id = item._id;
			//that.form1.data.user_id = "";

		},
		// 监听 - 页面关闭
		onClose() {
			//that.$refs.form1.resetForm(); // 关闭时，重置表单
		},
		// 监听 - 提交成功后
		onFormSuccess(res) {
			that.value.show = false; // 关闭页面
			that.$emit("success");
		}
	},
	watch: {
		
	},
	// 计算属性
	computed: {}
};
</script>

<style lang="scss" scoped></style>
